<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 250px;
				background-color: azure;
				padding: 50px;
				margin: 0 auto;
				margin-bottom: 20px;
			}
			.box>div{
				margin-bottom: 10px;
			}
			.d0>input{
				width: 190px;
			}
			table{
				width: 300px;
				height: 50px;
				margin: 0 auto;
				text-align: center;
				table-layout: fixed;
			}
			table>thead{
				font-weight: bold;
			}
		</style>
	</head> 
	<body>
	 	<div class="box">
	 		<div class="d1">
	 				姓名：
	 				<input type="text" id="user" value="" />
	 			</div>
	 			<div class="d2">
	 				密码：
	 				<input type="password" id="password" name="" />
	 			</div>
	 			<div class="d3">
	 				<input type="radio" name="sex"  value="1" checked="checked"/><label for="sex">男</label>
	 				<input type="radio" name="sex"  value="2"/><label for="sex">女</label>
	 			</div>
	 			<div class="d4">
	 				<button type="button" class="btn">提交</button>
	 			</div>
	 		</div>
	 		<table border="1" cellspacing="0" cellpadding="0">
	 			<thead>
	 				<tr>
	 					<td>用户名</td>
	 					<td>密码</td>
	 					<td>性别</td>
	 					<td>操作</td>
	 				</tr>
	 			</thead>
	 			<tbody>
	 				<!-- <tr>
	 					<td></td>
	 					<td></td>
	 					<td></td>
	 					<td><button type="button" onclick="del(${arr[i].id})">删除</button></td>
	 				</tr> -->
	 			</tbody>
	 		</table>
	 	</div>	
	</body>
	<script type="text/javascript">
		var user = document.querySelector(".d1>#user");
		var passord = document.querySelector(".d2>#password");
		var sexs = document.querySelectorAll(".d3>input[type='radio']");
		var btn = document.querySelector(".btn");
		var tbody = document.querySelector("tbody");
		
		if (localStorage.cv) {
			var arr = JSON.parse(localStorage.cv);
			show(arr);
		} else{
			var arr = [];
			localStorage.cv = JSON.stringify(arr);
		}
		
		btn.onclick = function(){
			var obj = {
				user:user.value,
				password:password.value,
				sex:getsexV(),
				id:+new Date
			}
			arr.push(obj);
			localStorage.cv = JSON.stringify(arr);
			show(arr);
			user.value = password.value = sexs.value = '';
		}
		
		function getsexV(){
			for(i=0;i<sexs.length;i++){
				if(sexs[i].checked){
					return sexs[i].value;
				}
			}
		}
		
		function getsexfn(value){
			return value == "1"?"男":"女";
		}
		
		function show(arr){
			tbody.innerHTML = ""
			for(var i=0;i<arr.length;i++){
				tbody.innerHTML+=`
				    <tr>
				    	<td>${arr[i].user}</td>
				    	<td>${arr[i].password}</td>
				    	<td>${getsexfn(arr[i].sex)}</td>
				    	<td><button type="button" onclick="del(${arr[i].id})">删除</button></td>
				    </tr>
				`;
			}
		}
		
		function del(id){
			for(var i=0;i<arr.length;i++){
				if(arr[i].id == id){
					arr.splice(i,1)
				}
			}
			localStorage.cv = JSON.stringify(arr)
			show(arr)
		}
	</script>
</html>
